<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试插件效果文件夹</title>
    <style>
       *{
           padding: 0px;
           margin: 0px;
       }
       article{
        border: chartreuse solid 5px;
        width: 400px;
        height: 600px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        margin: 50px;

    
       }
       article section{
           flex: 1 0 100px;
           background: cyan;
           background-clip: content-box;
           padding: 10px;
           display: flex;
           flex-direction: column;
           text-align: center;
           border-radius: 30px;
       }
       article section div{
           flex: 1;
           display: flex;
           /* 主轴方向 */
           flex-direction: column;
           /* 主轴对其方式 */
           justify-content: center;
           font-size: 40px;

       }
       article section span{
            color: azure;
            padding: 10px;
            background: #48dbfb;
            /* 鼠标图标 */
            cursor: pointer;
            

       }

       /* 控制span颜色 */
       #last{
        background: #0abde3;
        border-radius: 0 0 20px 20px;
       }
       
    </style>

    <!-- 上下排列的js -->
    <script>
        // 获取order并且设置属性进行排序
        function up(el){
            console.log(getComputedStyle(el.parentElement,null).order);
            let order = (getComputedStyle(el.parentElement,null).order);
            el.parentElement.style.order = order*1-1;
        }
        function down(el){
            console.log(getComputedStyle(el.parentElement,null).order);
            let order = (getComputedStyle(el.parentElement,null).order);
            el.parentElement.style.order = order*1+1;
        }
        
        
    </script>
</head>
<body>
    <article>
        <section>
            <div>1</div>
            <span onclick="up(this)">up</span>
            <span id = "last" onclick="down(this)">down</span>
        </section>
        <section>
             <div>2</div>
            <span onclick="up(this)">up</span>
            <span id = "last" onclick="down(this)">down</span>
        </section>
        <section>
              <div>3</div>
              <span onclick="up(this)">up</span>
              <span id = "last" onclick="down(this)">down</span>
        </section>
         
    </article>
 
</body>
</html>